<template>
    <div>
        <h1>(选项式api）的生命周期</h1>
        <div id="box1">{{ msg }}</div>
        <div id="box2">{{ count }}</div>
        <div id="box3">{{ msg }}</div>
        <input type="button" value="修改msg" @click="changeMsg">
        <SonA></SonA>
        <div></div>
        <router-link to="/Admin/Lifecycle_composition">去组合式的生命周期</router-link>
    </div>
</template>

<script >
export default {
    data() {
        return {
            msg: "hello vue",
            count: 2,
            myTimer:null
        }
    },
    methods: {
        changeMsg() {
            this.msg += "1";
        }
    },
    beforeCreate() {
        console.log("beforeCreate");
        console.log("this", this);
        console.log("this.msg", this.msg);//undefined
    },
    created() {
        console.log("created");
        console.log("this.msg", this.msg);//hello vue
        this.myTimer = setInterval(()=>{
            console.log("hi");         
            // this.count++;
        },1000)
    },
    beforeMount() {
        console.log("beforeMount");
        console.log("this.msg", this.msg);//hello vue
        // console.log('document.getElementById("box1")', document.getElementById("box1"));//null
    },
    mounted() {
        console.log("mounted");
        console.log('document.getElementById("box1").innerHTML', document.getElementById("box1").innerHTML);//hello vue

    },
    beforeUpdate() {
        console.log("beforeUpdate");
        console.log("this.msg", this.msg);//hello vue1
        console.log('document.getElementById("box1").innerHTML', document.getElementById("box1").innerHTML);//hello vue
    },
    updated() {
        console.log("updated");
        console.log('document.getElementById("box1").innerHTML', document.getElementById("box1").innerHTML);//hello vue1

    },
    beforeUnmount(){
        console.log("选项式：beforeUnmount");
        window.clearInterval(this.myTimer);
    },
    unmounted(){
        console.log("unmounted");
    }
}

</script>

<style lang="css" scoped></style>
